<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!--edge浏览器H5兼容设置-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--360浏览器H5兼容设置-->
    <meta name="renderer" content="webkit" />
    <title></title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .wrapper{
            width: 800px;
            margin: 50px auto;
        }
        /*清除浮动*/
        .wrapper::after{
            content: "";
            display: block;
            clear: both;
        }
        ul li{
            width: 100%;
            height: 30px;
            text-align: center;
            line-height: 30px;
            float: left;
            background: #ccc;
            margin: 10px 0px;
        }
        a{
            cursor: pointer;
            border:1px solid black;
        }
        .btn{
            float: right;
        }
    </style>
    <script type="text/javascript" src="../bootstrap3/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            /*添加100条数据（模仿后台传入）*/
            for(var i = 1; i<101;i++){
                $("#content").append("<li>"+i+"</li>");
            }
            /*设置每页显示的条数*/
            $every_page = 5;

            $items = $("ul li");
            $total_all = $items.length;//总条数
            $page_num = Math.round($total_all/$every_page)//向上取整（2.5 ==> 3）

            $("#total_page").text($page_num);
            //初始化页面，只显示前5条。
            $("ul li:gt("+($every_page-1)+")").each(function(){
                $(this).hide();
            })
            //点击下一条按钮函数。
            $("#next_page").click(function(){
                $current_page = ($("#current_page").text());//获取当前页码
                if($current_page <$page_num){
                    $("#current_page").text(++$current_page);
                    $.each($("ul li"),function(index,item){
                        //获取下一页显示的开始索引。
                        var start = ($("#current_page").text()-1)*$every_page;
                        if(index>=start&& index<start+$every_page){
                            $(this).show();
                        }else{
                            $(this).hide();
                        }
                    })
                }else{
                    return false;
                }
            })
            $("#pre_page").click(function(){
                $current_page = ($("#current_page").text());
                if($current_page > 1){
                    $("#current_page").text(--$current_page);
                    $.each($("ul li"),function(index,item){
                        var start = ($("#current_page").text()-1)*$every_page;
                        if(index>=start&& index<start+$every_page){
                            $(this).show();
                        }else{
                            $(this).hide();
                        }
                    })
                }else{
                    return false;
                }
            })
        })
    </script>
</head>
<body>
<div class="wrapper">
    <div class="items">
        <ul id= "content">

        </ul>
    </div>
    <span class="btn">
            <a id = "pre_page">上一页</a>
            <span>
                <span id = "current_page">1</span>
                <span>/</span>
                <span id = "total_page"></span>
            </span>
            <a id = "next_page">下一页</a>
        </span>
</div>
</body>
</html>